<template>
    <div>
        <content-item>
            <div slot="title">消息列表</div>
            <div slot="action">
                <!-- <div class="action">
                <el-popover placement="top-start" width="120" trigger="hover">
                    <div class="btn-group">
                        <div @click="refresh()">刷新</div>
                    </div>
                    <i class="el-icon-more" slot="reference"></i>
                </el-popover>
            </div> -->
            </div>
            <div slot="body">
                <div class="content-body" v-infinite-scroll="getDataTable" :infinite-scroll-disabled="doStatus"
                    style="overflow:auto">
                    <div class="content-item" v-for="(item,index) in tabledata" :key="index">
                        <div class="content" @click="showDetails(item.id)">
                            <span class="msg-type">{{item.msgTypeDesc}}</span>&nbsp;|
                            <span>{{item.msgContent}}</span>
                        </div>
                        <div class="content-footer">
                            <div class="footer-btn">
                                <span @click="readMsgToConfirm(item.id)">标为已读</span>
                                <span @click="delMsg(item.id)">删除</span>
                            </div>
                            <div>{{item.createdTime}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </content-item>
        <msg-detail v-if="visible" ref="detail" @readMsg="readMsg"></msg-detail>
    </div>
</template>
<script>
    import contentItem from '../content-item'
    import msgDetail from './detail'
    import * as messageinfoService from '@/api/chat/messageinfo'
    import * as messageSeeRecordService from '@/api/chat/messageseerecord'
    export default {
        data() {
            return {
                tabledata: [],
                visible: false,
                page: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
                doStatus: false
            }
        },
        components: {
            contentItem,
            msgDetail
        },
        mounted() {
            // this.getDataTable()
            // this.refresh()
        },
        methods: {
            refresh() {
                this.page.page = 1
                this.page.limit = 10
                this.total = 0
                this.tabledata = []
                // this.getDataTable()
            },
            // 获取数据列表
            getDataTable() {
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    readStatus: 'N'
                };
                messageinfoService.getuserMsgList(query).then(data => {
                    if (data != null && data.list.length > 0) {
                        this.tabledata = this.tabledata.concat(data.list);
                        this.page.page++
                    }
                    if (this.tabledata != null && this.tabledata.length > 0) {
                        this.$store.commit('d2admin/inmail/SET_INMAIL_LIST', this.tabledata)
                    }
                    // console.log("未读消息数：" + data.totalCount)
                });
            },
            readMsgToConfirm(id) {
                if (id) {
                    let that = this
                    this.$confirm("确认要标记为已读？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "确定",
                        cancelButtonText: "取消"
                    }).then(() => {
                        messageSeeRecordService.readMessage(id).then(() => {
                            // this.getDataTable();
                            that.tabledata.forEach((item, index) => {
                                if (item.id === id) {
                                    that.tabledata.splice(index, 1);
                                    this.$store.commit('d2admin/inmail/DEL_MSG',
                                        id)
                                }
                            })
                            that.$message.success("操作成功！")
                        });
                    });
                }
            },
            readMsg(id) {
                if (id) {
                    let that = this
                    messageSeeRecordService.readMessage(id).then(() => {
                        that.tabledata.forEach((item, index) => {
                            if (item.id === id) {
                                that.tabledata.splice(index, 1);
                                this.$store.commit('d2admin/inmail/DEL_MSG',
                                        id)
                            }
                        })
                    });
                }
            },
            delMsg(id) {
                if (id) {
                    let that = this
                    this.$confirm("确认要删除消息？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        messageSeeRecordService.delMessage(id).then(() => {
                            that.tabledata.forEach((item, index) => {
                                if (item.id === id) {
                                    that.tabledata.splice(index, 1);
                                }
                            })
                            this.$message.success("操作成功！")
                        });
                    });
                }
            },
            showDetails(id) {
                console.log(id)
                this.visible = true
                let that = this
                that.$nextTick(() => {
                    that.$refs.detail.init(id)
                })
            }
        }
    }
</script>
<style scoped>
    .content-body {
        box-sizing: border-box;
        padding: 15px;
        /* 注意此处撑开盒子 */
        height: 350px;
        overflow-y: auto;
        cursor: pointer;
    }

    .content-body::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .content-body::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(184, 184, 184, 0.1);
        background: #c0c0c0;
    }

    .content-body::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(49, 49, 49, 0.1);
        border-radius: 10px;
        background: #EDEDED;
    }

    .action {
        font-size: 10px;
        color: #6c757d;
    }

    .content-item {
        padding: 10px;
        border-bottom: 1px solid #eaeaea;
    }

    .content-item:hover {
        background: rgba(255, 255, 255, .9)
    }

    .msg-type {
        font-size: 9px;
        border: 1px solid yellowgreen;
        border-radius: 3px;
        padding: 3px 5px;
    }

    .content {
        font-size: 15px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        margin-bottom: 5px;
    }

    .content-footer {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: 13px;
    }

    .btn-group>div {
        padding: 5px 10px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        color: #6c757d;
        /* cursor: pointer; */
    }

    .footer-btn>span {
        font-size: 12px;
        padding-right: 6px;
        /* cursor: pointer; */
    }
</style>